<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24" style="height: 45px">
            <a-form-item>
              <a @click="handleBaseInfo">
                ┃ 基本信息
              </a>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="供应商名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplyFullName">
              <a-input v-model="model.supplyFullName" placeholder="请输入供应商名称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="供应商简称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplyShortName">
              <a-input v-model="model.supplyShortName" placeholder="请输入供应商简称"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="省市区" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="administrativeArea">
              <j-area-linkage type="cascader" v-model="model.administrativeArea" placeholder="请输入省市区"  />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="详细地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="address">
              <a-input v-model="model.address" placeholder="请输入详细地址"  ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="供应商类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplyType">
              <j-dict-select-tag type="list" v-model="model.supplyType" dictCode="mdm_supply_type" placeholder="请选择供应商类型" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="remark">
              <a-textarea v-model="model.remark" rows="2" placeholder="请输入备注" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24" style="text-align: center; height: 40px">
            <a-form-item>
              <a @click="handleMoreInfo" style="margin-left: 9px">
                补充更多信息
                <a-icon :type="showMoreInfo ? 'up' : 'down'" />
              </a>
            </a-form-item>
          </a-col>
          <template v-if="showMoreInfo">
            <a-col :span="24" style="height: 45px">
              <a-form-item>
                <a @click="handleInvInfo">
                  ┃ 开票信息
                  <a-icon :type="showInvInfo ? 'up' : 'down'" />
                </a>
              </a-form-item>
            </a-col>
            <template v-if="showInvInfo">
              <a-col :span="12">
                <a-form-model-item label="开户银行" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invBankName">
                  <a-input v-model="model.invBankName" placeholder="请输入开户银行"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="银行账号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invBankNo">
                  <a-input v-model="model.invBankNo" placeholder="请输入银行账号"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="纳税人识别号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invTaxNo">
                  <a-input v-model="model.invTaxNo" placeholder="请输入纳税人识别号"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invAddr">
                  <a-input v-model="model.invAddr" placeholder="请输入地址"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="电话" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="invTel">
                  <a-input v-model="model.invTel" placeholder="请输入电话"  ></a-input>
                </a-form-model-item>
              </a-col>
            </template>
            <a-col :span="24" style="height: 45px">
              <a-form-item>
                <a @click="handleOtherInfo">
                  ┃ 其它信息
                  <a-icon :type="showOtherInfo ? 'up' : 'down'" />
                </a>
              </a-form-item>
            </a-col>
            <template v-if="showOtherInfo">
              <a-col :span="12">
                <a-form-model-item label="供应商编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="supplyNo">
                  <a-input v-model="model.supplyNo" placeholder="请输入供应商编码"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="成立时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="setTime">
                  <j-date placeholder="请选择成立时间" v-model="model.setTime"  style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="注册资金" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="registCapital">
                  <a-input-number v-model="model.registCapital" placeholder="请输入注册资金" style="width: 100%" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="网址" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="webSite">
                  <a-input v-model="model.webSite" placeholder="请输入网址"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="经营范围" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cateScope">
                  <a-input v-model="model.cateScope" placeholder="请输入经营范围"  ></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="行业" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="cateTypeCode">
                  <j-dict-select-tag type="list" v-model="model.cateTypeCode" dictCode="crm_cust_cate" placeholder="请选择行业" />
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="企业性质" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="entTypeCode">
                  <j-dict-select-tag type="list" v-model="model.entTypeCode" dictCode="crm_ent_type" placeholder="请选择企业性质" />
                </a-form-model-item>
              </a-col>
            </template>
          </template>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'MdmSupplyForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
           supplyFullName: [
              { required: true, message: '请输入供应商名称!'},
           ],
        },
        url: {
          add: "/mdm/supply/add",
          edit: "/mdm/supply/edit",
          queryById: "/mdm/supply/queryById"
        },
        showBaseInfo: true,
        showInvInfo: true,
        showOtherInfo: true,
        showMoreInfo: false
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      handleBaseInfo(){
        this.showBaseInfo = !this.showBaseInfo;
      },
      handleInvInfo(){
        this.showInvInfo = !this.showInvInfo;
      },
      handleOtherInfo(){
        this.showOtherInfo = !this.showOtherInfo;
      },
      handleMoreInfo(){
        this.showMoreInfo = !this.showMoreInfo;
      },
    }
  }
</script>